<template>
	<Page icon="/static/svg/index-top.svg" title="杭州市" page="Home"></Page>
	<view class="top-card" :style="{
			backgroundImage: `linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(${PageData.CardBgImg})`
		}">
		<view class="background-controls">
			<view class="bg-control-btn iconfont" @click="ChangeBg">
				<text class="iconfont">&#xe69e;</text>
				<text class="up-m-l-6">换一换</text>
			</view>
		</view>

		<view class="up-flex up-flex-items-center up-m-b-64">
			<image :src="PageData.UserInfo.avatar || `/static/svg/avatar.svg`" class="user-avatar" />
			<view class="up-m-l-48">
				<view class="font-sm opacity-sm up-m-b-16">欢迎回来</view>
				<view class="font-weight-bold font-bg up-m-b-20">{{ PageData.UserInfo.nickName }}</view>
				<view class="font-base">
					<text>九号新星</text>
					<!-- <text class="up-m-l-12">恒星组成员</text> -->
				</view>
			</view>
		</view>
		<view class="stats-grid">
			<view class="stat-item">
				<view class="iconfont">&#xe611;</view>
				<view class="font-weight-bold font-lg up-m-b-10">{{ PageData.UserNumber.mileage || 0 }}</view>
				<view class="font-mini opacity-sm">行驶里程</view>
			</view>
			<view class="stat-item">
				<view class="iconfont">&#xe602;</view>
				<view class="font-weight-bold font-lg up-m-b-10">{{ PageData.UserNumber.joinEvent || 0 }}</view>
				<view class="font-mini opacity-sm">参与活动</view>
			</view>
			<view class="stat-item">
				<view class="iconfont">&#xe729;</view>
				<view class="font-weight-bold font-lg up-m-b-10">{{ PageData.UserNumber.badge || 0 }}</view>
				<view class="font-mini opacity-sm">获得徽章</view>
			</view>
		</view>
		<view class="level-progress">
			<view class="up-flex up-flex-between up-flex-items-center up-m-b-32">
				<view class="font-sm">距离下一等级</view>
				<view class="progress-points">{{ PageData.UserNumber.integral || 0 }}/999</view>
			</view>
			<up-line-progress :showText="false" :percentage="0" height="8" inactiveColor="rgba(255, 255, 255, 0.2)"
				activeColor="#fbbf24"></up-line-progress>
		</view>
	</view>

	<view class="quick-actions">
		<view class="section-title-small">
			快捷功能
		</view>
		<view class="actions-grid">
			<view class="action-item" v-for="menu in PageData.MenuList" :key="menu.id" @click="ToPath(menu)">
				<up-image :src="menu.icon" width="52px" height="52px"></up-image>
				<view class="action-name">{{ menu.name }}</view>
				<view class="action-desc">{{ menu.desc }}</view>
			</view>
		</view>
	</view>
	<view class="recommended-activities">
		<view class="section-header up-m-b-32">
			<view class="section-title">推荐活动</view>
			<view class="more-btn">
				<up-icon label="更多" @click="More" label-color="#667eea" color="#667eea" label-size="12" label-pos="left"
					size="12" name="arrow-right"></up-icon>
			</view>
		</view>
		<up-scroll-list indicatorActiveColor="#165dff">
			<block v-for="act in PageData.ActList" :key="act.id">
				<ActItem :Info="act" />
			</block>
		</up-scroll-list>
	</view>

</template>

<script setup>
	import Page from '@/components/Page.vue';
	import ActItem from '@/components/ActItem.vue';
	import HomeApi from '@/Api/Home.js'
	import Utils from '@/utils/common.js'
	import {
		onShow,
		onLoad,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue';


	const PageData = ref({
		UserInfo: {},
		UserNumber: {},
		MenuList: [],
		ActList: [],
		BackgroundList: [],
		CardBgImg: ''
	})


	onLoad(() => {
		HomeData()
	})


	onShow(() => {
		// 获取缓存的用户信息
		PageData.value.UserInfo = uni.getStorageSync('UserInfo') || {}
	})

	onShareAppMessage(() => {})

	const HomeData = () => {
		HomeApi.Data().then(resp => {
			PageData.value.UserInfo = resp.data.Info
			if (resp.data.Info) {
				uni.setStorageSync('UserInfo', resp.data.Info)
				uni.setStorageSync('auth', resp.data.Info.authStatus)
			}
			PageData.value.UserNumber = resp.data.Data
			PageData.value.MenuList = resp.data.Menu
			PageData.value.ActList = resp.data.Activity
			PageData.value.BackgroundList = resp.data.Background

			if (PageData.value.BackgroundList.length === 0) {
				PageData.value.CardBgImg =
					'https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2025/09/12/jpeg/001_20250912141439A197.jpeg'
				return
			}
			const current = uni.getStorageSync('bgCurrent') || 0
			PageData.value.CardBgImg = PageData.value.BackgroundList[current].url

		})
	}

	const ChangeBg = () => {
		if(PageData.value.BackgroundList.length === 0){
			return
		}
		const current = Math.floor(Math.random() * PageData.value.BackgroundList.length)
		uni.setStorageSync('bgCurrent', current)
		PageData.value.CardBgImg = PageData.value.BackgroundList[current].url
	}


	const ToPath = (menu) => {
		if (!menu.path) {
			Utils.toast("正在熬夜开发中...")
			return
		}
		if (menu.method === 'tabBar') {
			uni.switchTab({
				url: menu.path
			})
			return
		}
		uni.navigateTo({
			url: menu.path,
		})
	}

	const More = () => {
		uni.switchTab({
			url: '/pages/Event'
		})
	}
</script>

<style lang="scss" scoped>
	.top-card {
		margin: 24px;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 20px;
		padding: 32px;
		color: white;
		position: relative;
		overflow: hidden;
		box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3);

		.user-avatar {
			width: 70px;
			height: 70px;
			border-radius: 50%;
			border: 3px solid rgba(255, 255, 255, 0.3);
		}

		.background-controls {
			position: absolute;
			display: flex;
			pointer-events: all;
			z-index: 10;
			top: 18px;
			right: 18px;
			gap: 6px;

			.bg-control-btn {
				padding: 4px 8px;
				border: none;
				border-radius: 8px;
				background: rgba(255, 255, 255, 0.2);
				backdrop-filter: blur(10px);
				color: white;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;
				font-size: 12px;
				opacity: 0.8;
			}
		}

	}

	.stats-grid {

		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
		margin-bottom: 24px;
		position: relative;
		z-index: 1;

		.stat-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			padding: 16px;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 12px;
			backdrop-filter: blur(10px);
			transition: transform 0.3s ease;

			.iconfont {
				width: 32px;
				height: 32px;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 8px;
			}
		}
	}


	.level-progress {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 12px;
		padding: 20px;
		backdrop-filter: blur(10px);
		position: relative;
		z-index: 1;

		.progress-points {
			font-weight: 600;
			background: rgba(255, 255, 255, 0.2);
			padding: 4px 8px;
			border-radius: 6px;
			font-size: 10px;
		}
	}

	.quick-actions {
		padding: 0 24px;
		margin-bottom: 32px;

		.section-title-small {
			font-size: 14px;
			font-weight: 600;
			color: #1e293b;
			margin-bottom: 16px;
			padding-left: 10px;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 4px;
				height: 14px;
				background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
				border-radius: 2px;
			}

		}

		.actions-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 16px;

			.action-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 10px;
				background: white;
				border: none;
				border-radius: 16px;
				padding: 20px 16px;
				cursor: pointer;
				transition: all 0.3s ease;
				border: 1px solid #e2e8f0;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
				position: relative;
				overflow: hidden;

				.action-name {
					font-size: 12px;
					color: #1e293b;
					font-weight: 600;
				}

				.action-desc {
					font-size: 10px;
					color: #64748b;
					font-weight: 400;
				}
			}
		}




	}

	.recommended-activities {
		padding: 0 24px;
		margin-bottom: 32px;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16px;

			.section-title {
				font-size: 18px;
				font-weight: 600;
				color: #333;
			}
		}
	}
</style>